<template>
	<div class="album-sort">
		<div class="nav-head"><router-link to="/album"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">专辑分类</div></div>
		<div class="top-blank"></div>
		<div class="album-sort-wraper">
			<div class="song-sort">
				<div class="area">
					<div class="title">地区</div>
					<div class="kinds">
						<span>内地</span>
						<span>港台</span>
						<span>欧美</span>
						<span>日本</span>
						<span>韩国</span>
					</div>	
				</div>
				<div class="album">
					<div class="title">唱片</div>
					<div class="kinds">
						<span>金唱片</span>
						<span>白金唱片</span>
						<span>钻石唱片</span>
						<span>殿堂唱片</span>
					</div>		
				</div>
				<div class="style">
					<div class="title">流派</div>
					<div class="kinds">
						<span>流行</span>
						<span>嘻哈</span>
						<span>民谣</span>
						<span>电子</span>
						<span>摇滚</span>
					</div>
				</div>
			</div>
			<div class="new-album-list">
				<h2>最新上架</h2>
				<div  class="album-list">
					<div class="album-info mr10">
						<img src="../../../../assets/5370.png">
						<div class="album-info">
							<p class="album-name">如果爱忘了</p>
							<p class="album-singer">戚薇</p>
							<p class="album-price">￥ <span>30</span></p>
							<div class="buy-btn">购买</div>
						</div>
					</div>	
					<div class="album-info">
						<img src="../../../../assets/5370.png">
						<div class="album-info">
							<p class="album-name">如果爱忘了</p>
							<p class="album-singer">戚薇</p>
							<p class="album-price">￥ <span>30</span></p>
							<div class="buy-btn">购买</div>
						</div>
					</div>
					<div class="album-info mr10">
						<img src="../../../../assets/5370.png">
						<div class="album-info">
							<p class="album-name">如果爱忘了</p>
							<p class="album-singer">戚薇</p>
							<p class="album-price">￥ <span>30</span></p>
							<div class="buy-btn">购买</div>
						</div>
					</div>	
					<div class="album-info">
						<img src="../../../../assets/5370.png">
						<div class="album-info">
							<p class="album-name">如果爱忘了</p>
							<p class="album-singer">戚薇</p>
							<p class="album-price">￥ <span>30</span></p>
							<div class="buy-btn">购买</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"albumSort",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.blank{
	width: 100%;
	height: 108 / 100rem;
	background-color: #fff;
	clear: both;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}	
.album-sort-wraper{
	width: 100%;
	.song-sort{
		width: 100%;
		padding-top: 32/100rem;
		padding-left: 20/100rem;
		box-sizing: border-box;
		background-color: #fff;
		.area{
			margin-bottom: 40/100rem;
			overflow: hidden;
			.title{
				float: left;
				font-size: 30/100rem;
				margin-right: 78/100rem;
			}
			.kinds{
				float: left;
				span{
					width: 118/100rem;
					display: block;
					float: left;
					font-size: 24 / 100rem;
				}
			}
		}
		.album{
			margin-bottom: 40/100rem;
			overflow: hidden;
			.title{
				float: left;
				font-size: 30/100rem;
				margin-right: 78/100rem;
			}
			.kinds{
				float: left;
				span{
					width: 147.5/100rem;
					display: block;
					float: left;
					font-size: 24 / 100rem
				}
			}
		}
		.style{
			margin-bottom: 40/100rem;
			overflow: hidden;
			.title{
				float: left;
				font-size: 30/100rem;
				margin-right: 78/100rem;
			}
			.kinds{
				float: left;
				span{
					width: 118/100rem;
					display: block;
					float: left;
					font-size: 24 / 100rem
				}
			}
		}
		.look-more{
			text-align: center;
			font-size: 20/100rem;
			padding-bottom: 38/100rem;
			img{
				width: 12/100rem;
			}
		}
	}
	.new-album-list{
		width: 100%;
		h2{
			font-size: 30 / 100rem;
			margin-left: 20 / 100rem;
			padding-top: 30 / 100rem;
			padding-bottom: 20 / 100rem;
		}
		.album-info{
			float: left;
			width: 370 / 100rem;
			overflow: hidden;
			img{
				width: 100%;
			}
			.album-info{
				padding-left: 20 / 100rem;
				box-sizing: border-box;
				z-index: -1;
				position: relative;		
				overflow: hidden;
				.album-name{
					line-height: 54 / 100rem;
					font-size: 24 / 100rem;
				}
				.album-singer{
					line-height: 30 / 100rem;
					font-size: 24 / 100rem;
				}
				.album-price{
					line-height: 43 / 100rem;
					font-size: 24 / 100rem;
				}
				.buy-btn{			
					position: absolute;
					width: 96 / 100rem;
					height: 46 / 100rem;
					text-align: center;
					border-radius: 18 / 100rem;
					border:2 / 100rem solid #333;
					top:65 / 100rem;
					right: 20 / 100rem;
					line-height: 46 / 100rem;
	 			}
			}
		}
	}
}	
.mr10{
	margin-right: 10 / 100rem;
}
</style>